<template>
	<div class="table-container">
		<vab-query-form>
			<el-form :model="search" @submit.native.prevent>
				<el-form-item label="所属店铺" v-if="user.isAdminStore||user.isMainStore">
					<remoteselect v-model="search.SysStoreID" url="api/System/SysStoreListSelect"
						value-label="SysStoreName" value-key="SysStoreID" query-key="selectIDName" placeholder="所属店铺"
						style="width:150px;">
						<template v-slot="{ row }">
							{{row.SysStoreName}}
						</template>
					</remoteselect>
				</el-form-item>

				<el-form-item prop="SysEmployeeName__PY">
					<el-input v-model="search.SysEmployeeName__PY" size="small" placeholder="员工姓名"
						@keyup.native.enter="getList" style="width:120px"></el-input>
				</el-form-item>
				<el-form-item prop="SysEmployeePhone">
					<el-input v-model="search.SysEmployeePhone" size="small" placeholder="手机号"
						@keyup.native.enter="getList" style="width:120px"></el-input>
				</el-form-item>
				<el-form-item prop="UserCode">
					<el-input v-model="search.UserCode" size="small" placeholder="登录账号" @keyup.native.enter="getList"
						style="width:120px">
					</el-input>
				</el-form-item>

				<el-form-item label="是否能看手机号" prop="CanSeePhone">
					<el-select v-model="search.CanSeePhone" clearable style="width:100px;">
						<el-option v-for="item in EnumIsYes" :key="item.Value" :value="item.Value" :label="item.Label">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="在职状态" prop="EnumQuitStatus">
					<el-select v-model="search.EnumQuitStatus" clearable style="width:100px;">
						<el-option v-for="item in EnumQuitStatus" :key="item.Value" :value="item.Value"
							:label="item.Label"></el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="帐号状态" prop="SysOperator$EnumStatus">
					<el-select v-model="search.SysOperator$EnumStatus" clearable style="width:100px;">
						<el-option v-for="item in EnumStatus" :key="item.Value" :value="item.Value" :label="item.Label">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item>
					<el-button v-if="button.查询" icon="el-icon-search" type="primary" native-type="submit"
						@click="getList">
						查询
					</el-button>
					<el-button icon="el-icon-plus" type="primary" @click="btnAdd" v-if="button.新建">
						新建
					</el-button>
				</el-form-item>
			</el-form>
			<!-- <vab-query-form-left-panel>
			</vab-query-form-left-panel>
			<vab-query-form-right-panel>
			</vab-query-form-right-panel> -->
		</vab-query-form>

		<el-table v-loading="loading" :data="list">
			<el-table-column prop="SysStore.SysStoreName" label="所属店铺" width="130" align="left"
				v-if="user.isAdminStore||user.isMainStore" key="所属店铺">
			</el-table-column>

			<el-table-column prop="SysEmployeeName" label="员工姓名" width="120" align="left"></el-table-column>
			<el-table-column prop="SysEmployeePhone" label="手机号" width="180" align="left"></el-table-column>

			<el-table-column prop="UserCode" label="登录帐号" width="120" align="left"></el-table-column>

			<el-table-column prop="HeaderUrl" label="员工头像" width="120" align="left">
				<template v-slot="scope">
					<el-image class="img" :preview-src-list="imageList" :src="scope.row.HeaderUrl"
						v-if="!!scope.row.HeaderUrl">
					</el-image>
				</template>
			</el-table-column>

			<el-table-column prop="CanSeePhone" label="是否能看手机号" width="120px">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.CanSeePhone,EnumIsYes)"></span>
				</template>
			</el-table-column>
			<el-table-column prop="EnumQuitStatus" label="在职状态" width="100px">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.EnumQuitStatus,EnumQuitStatus)"></span>
				</template>
			</el-table-column>
			<el-table-column prop="SysOperator.EnumStatus" label="帐号状态" width="100px">
				<template v-slot="scope">
					<span v-html="getLabel(scope.row.SysOperator.EnumStatus,EnumStatus)"></span>
				</template>
			</el-table-column>
			<el-table-column prop="LastDate" label="最后登录时间" width="230px" align="left">
				<template v-slot="scope">
					<span v-if="!!scope.row.LastDate">{{format(scope.row.LastDate)}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="SysOperator" label="操作员信息" width="400px" align="left">
				<template v-slot="scope">
					<span v-if="!!scope.row.SysOperator">
						登录帐号:{{scope.row.UserCode}}/{{scope.row.SysEmployeePhone}}
						帐号状态:<span v-html="getLabel(scope.row.SysOperator.EnumStatus,EnumStatus)"></span>
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="Remark" label="备注" width="300" align="left"></el-table-column>
			<el-table-column2 label="操作" v-if="button.重置密码 || button.编辑">
				<template v-slot="scope">
					<el-button type="text" @click="btnEdit(scope.row)" v-if="button.编辑">编辑</el-button>
					<el-button type="text" @click="updatePwdFun(scope.row)" v-if="button.重置密码">重置密码</el-button>
				</template>
			</el-table-column2>
		</el-table>
		<el-pagination :current-page="search.index" :page-size="search.size" :total="total"
			@current-change="indexChange" @size-change="sizeChange"></el-pagination>

		<!--修改密码-->
		<el-dialog :visible.sync="UpdatePassVisible" title="修改密码" :close-on-click-modal="false" class="updatePwd">
			<el-form size="small" :model="formUpdatePass" :rules="ruleUpdatePass" ref="formUpdatePass"
				label-width="100px" @submit.native.prevent :inline="false">
				<el-form-item label="新密码" prop="pass">
					<el-input type="password" v-model="formUpdatePass.pass" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码" prop="checkPass">
					<el-input type="password" v-model="formUpdatePass.checkPass" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="UpdatePassVisible=false">取消</el-button>
				<el-button type="primary" @click="updataPassSave" :loading="loading">保存</el-button>
			</div>
		</el-dialog>

		<sysemployeeadd ref="edit" @success="getList"></sysemployeeadd>
	</div>
</template>

<script>
	import sysemployeeadd from "./SysEmployeeAdd";
	import common from "@/common/common.js";

	export default {
		name: "SysEmployeeListfs",
		mixins: [common.baseVM],
		components: {
			sysemployeeadd,
		},
		computed: {
			imageList() {
				var list = this.list;
				var r = [];
				for (var i = 0; i < list.length; i++) {
					var item = list[i];
					r.push(item.HeaderUrl);
				}
				return r;
			}
		},
		data() {
			return {
				EnumIsYes: [{
					Value: false,
					Label: "否",
					Color: "green"
				}, {
					Value: true,
					Label: "是",
					Color: "red"
				}],
				button: {
					查询: true,
					新建: true,
					编辑: true,
					重置密码: true
				},
				list: [],
				total: 0,
				search: {
					index: 1,
					size: 10,
					EnumQuitStatus: 0,
					SysOperator$EnumStatus: null
				},

				formUpdatePass: {
					id: 0,
					pass: '',
					checkPass: ''
				},
				ruleUpdatePass: {
					pass: [{
							required: true,
							message: '请输入新密码',
							trigger: 'blur'
						},
						{
							validator: (rule, value, callback) => {
								if (value === '') {
									callback(new Error('请输入新密码'));
								} else {
									callback();
								}
							},
							trigger: 'blur'
						}
					],
					checkPass: [{
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error('请再次输入密码'));
							} else if (value !== this.formUpdatePass.pass) {
								callback(new Error('两次输入密码不一致!'));
							} else {
								callback();
							}
						},
						trigger: 'blur'
					}]
				},
				UpdatePassVisible: false,
			};
		},
		computed: {
			EnumQuitStatus() {
				var temp = EnumQuitStatus;
				if (temp == null) return [];
				return temp;
			},
			EnumStatus() {
				var temp = EnumStatus;
				if (temp == null) return [];
				return temp;
			}
		},
		methods: {
			init() {
				this.getList();
			},
			updataPassSave: function() {
				this.formValidate('formUpdatePass', () => {
					var model = {
						id: this.formUpdatePass.id,
						pass: common.tool.md5(this.formUpdatePass.pass)
					};
					var post = common.tool.toKeyValue(model);
					this.loading = true;
					common.tool.post("/api/System/UpdateEmployeePwd", post).then((data) => {
						common.showToast(data.Message, "success");
						this.UpdatePassVisible = false;
						this.loading = false;
					}).catch(() => {
						this.loading = false;
					});
				});
			},
			updatePwdFun: function(row) {
				this.UpdatePassVisible = true;
				this.$nextTick(() => {
					this.resetVal('formUpdatePass');
					this.formUpdatePass.id = row.SysEmployeeID;
				});
			},

			btnAdd() {
				this.$refs["edit"].show();
			},
			btnEdit(row) {
				this.$refs["edit"].show(row);
			},

			sizeChange(val) {
				this.search.size = val;
				this.getList();
			},
			indexChange(val) {
				this.search.index = val;
				this.getList();
			},
			getSearchData() {
				var r = this.toKeyValue(this.search);
				return r;
			},
			getList() {
				this.loading = true;
				this.post('api/System/SysEmployeeList', this.getSearchData()).then(data => {
					this.list = data.Result;
					this.total = data.Total;
					this.loading = false;
				}).catch(error => {
					this.loading = false;
				});
			}
		},
	};
</script>
